<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浏览器滑动效果</title>
</head>
<style>
    * {
        padding: 0;
        margin: 0;
        list-style: none;
    }

    html, body {
        height: 100%;
    }

    .big {
        height: 100%;
    }

    .big li {
        height: 100%;
        color: white;
    }

    .small {
        position: fixed;
        top: 30px;
        left: 50px;
    }

    .small li {
        border-radius: 5px;
        margin: 10px 0;
        line-height: 30px;
        padding: 10px;
        background-color: #fff;
    }

</style>
<body>
<ul class="big" id="big">
    <li>第一页</li>
    <li>第二页</li>
    <li>第三页</li>
    <li>第四页</li>
    <li>第五页</li>
    <li>第六页</li>
    <li>第七页</li>
</ul>

<ul class="small" id="small">
    <li>第一页</li>
    <li>第二页</li>
    <li>第三页</li>
    <li>第四页</li>
    <li>第五页</li>
    <li>第六页</li>
    <li>第七页</li>
</ul>
</body>
</html>
<script src="scroll.js" type="text/javascript"></script>
<script>
    var colors = ["#F00", "#F60", "#FF0", "#0C0", "#699", "#06C", "#909"]
    var bigLi = document.getElementById("big").children;
    for (var i = 0; i < bigLi.length; i++) {
        var obj = bigLi[i];
        obj.style.backgroundColor = colors[i];
    }
    var smallLi = document.getElementById("small").children;

    var leader = scroll().top, target = 0, timer = null;
    for (var i = 0; i < smallLi.length; i++) {
        var obj = smallLi[i];
        obj.index = i;
        obj.onclick = function () {
            clearInterval(timer);
            target = this.index * bigLi[0].offsetHeight;
            timer = setInterval(function () {
                leader = leader + (target - leader) / 10;
                scrollTo(0, leader);
                if (Math.round(leader) == target) {
                    scrollTo(0, target);
                    clearInterval(timer);
                }
            }, 10);

            for (var i = 0; i < smallLi.length; i++) {
                var obj = smallLi[i];
                obj.style.backgroundColor = "white";
                obj.style.color = "#333";
            }

            this.style.backgroundColor = "#369";
            this.style.color = "white";
        }

        windwowScroll();
        window.onscroll = windwowScroll;
        function windwowScroll() {
            leader = scroll().top;
            var index = Math.ceil(leader / bigLi[0].offsetHeight);
            for (var i = 0; i < smallLi.length; i++) {
                var obj = smallLi[i];
                if(i == index){
                    obj.style.backgroundColor = "#369";
                    obj.style.color = "white";
                }else {
                    obj.style.backgroundColor = "white";
                    obj.style.color = "#333";
                }
            }
        }
    }
</script>